﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>首页</title>
    <script src="/Apm/js/CMSList.js"></script>
    <script src="/js/echarts.js"></script>
    <link href="/css/Form.css" rel="stylesheet" type="text/css" />
    <style>
        .page{
            width:100%;
            height:100%;
            overflow-y:auto;
        } 
        .index-content {
            display: flex;
            flex-flow: wrap;
            padding:1rem;
        }
        .layui-collapse{
            margin:1rem;
        } 
        .layui-colla-item {
            width: 50rem;
        }
        .index-module {
            width: 100%;
            height: 30rem;
        }
        .toolsbar-icon{
            display:flex;
            justify-content:center;
            align-items:center;
        } 
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 2.5rem;
            font-style: normal;
            color: #fff;
            padding: 0 1rem;
        }
        .index-toolbar{
            display:flex;
            width:100%;
        }
        .toolsbar-module {
            width: 25%;
            height:4rem;
            display: flex;
            padding:1rem;
        }
        
        .toolsbar-content {
            display: flex;
            align-items: flex-end;
            padding: 0.5rem;
            background-color: #eee;
            width:calc(100% - 4rem);
        }
        .toolsbar-content span{
            padding:0 0.4rem;
        }
        
        .red {
            background-color: #FF5722;
        }
        .green {
            background-color: #009688;
        }
        .blue {
            background-color: #1E9FFF;
        }
        .yellow {
            background-color: #FFB800;
        }
        .download{
            padding:1rem;
        }
        .download p{
            padding:0.4rem;
        }
    </style>
</head>
<body>
    <div class="page">
        <!--<div class="download">
            <p>
                前台下载地址：
                <a href="https://gitee.com/wptoflay/Friendship" target="_blank">
                    <i class="layui-icon" style="color:#01AAED">&#xe609;</i>
                </a>
            </p>
            
            <p>
                后台数据接口：http://www.wppeng.top:86/
            </p>
            
        </div>-->
        <div class="index-toolbar">
            <div class="toolsbar-module">
                <div class="toolsbar-icon red">
                    <i class="iconfont">&#xe716;</i>
                </div>
                <div class="toolsbar-content">
                    <span>员工总数</span>
                    <span class="layui-badge">99</span>
                </div>
            </div>

            <div class="toolsbar-module">
                <div class="toolsbar-icon yellow">
                    <i class="iconfont">&#xe6e8;</i>
                </div>
                <div class="toolsbar-content">
                    <span>待办事项</span>
                    <span class="layui-badge">99</span>
                </div>
            </div>

            <div class="toolsbar-module">
                <div class="toolsbar-icon green">
                    <i class="iconfont">&#xe704;</i>
                </div>
                <div class="toolsbar-content">
                    <span>消息提醒</span>
                    <span class="layui-badge">99</span>
                </div>
            </div>

            <div class="toolsbar-module">
                <div class="toolsbar-icon blue">
                    <i class="iconfont">&#xe70a;</i>
                </div>
                <div class="toolsbar-content">
                    <span>邮件提醒</span>
                    <span class="layui-badge">99</span>
                </div>
            </div>

        </div>
        <div class="index-content">
            <div class="layui-collapse ">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">折线图</h2>
                    <div class="layui-colla-content layui-show">
                        <div id="main1" class="index-module">

                        </div>
                    </div>
                </div>

            </div>

            <div class="layui-collapse ">
                
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">饼图</h2>
                    <div class="layui-colla-content layui-show">
                        <div id="main2" class="index-module">

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
        BindData();
    });

    /**
     * 初始化数据
     */
    function BindData(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        var myChartbing = echarts.init(document.getElementById('main2'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

       var optionbing = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '直接访问' },
                        { value: 310, name: '邮件营销' },
                        { value: 234, name: '联盟广告' },
                        { value: 135, name: '视频广告' },
                        { value: 1548, name: '搜索引擎' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
       myChartbing.setOption(optionbing);

    }
    
</script>